<script lang="ts" setup>
import hijri from "dayjs-hijri";
import { getSvg } from "@/utils/index";
const { dayjs, userTimeZone } = useDayJs();
const fuzzySearchRef = ref();
const formattedDate = ref("");
const islamicDate = ref("");
function displayModal() {
  fuzzySearchRef.value.show = true;
  _css(document.documentElement, "overflow", "hidden");
}

onMounted(() => {
  // 获取印尼当前时间并格式化
  const nowInJakarta = dayjs().tz(userTimeZone).format("D MMMM, YYYY");
  formattedDate.value = nowInJakarta;

  // 获取伊斯兰教时间并格式化
  dayjs.extend(hijri);
  const nowInJakartaIslamic = dayjs().tz(userTimeZone).format("iD-iMMMM-iYYYY");
  islamicDate.value = nowInJakartaIslamic;
});
</script>
<template>
  <div class="center mb-14">
    <div
      class="mw-01 h-132 bg-[url(@/assets/svg/Frame_392.svg)] bg-no-repeat bg-cover shadow-[0px_0px_4px_0px_rgba(0,0,0,0.1)] rounded-10 flex flex-col gap-y-21 pl-20 pr-10 pt-17"
    >
      <div @click="displayModal" class="flex justify-between items-center">
        <div class="flex items-center gap-x-8">
          <img class="w-21 h-20" :src="getSvg('address')" alt="" />
          <span
            class="font-400 text-16 text-[#444444] lh-19 text-center not-italic"
            >Mumbai, Maharashtra</span
          >
        </div>
        <div
          class="px-8 h-22 lh-22 bg-[rgba(110,234,204,0.44)] rounded-40 font-500 text-12 text-[#007974] text-center not-italic"
        >
          {{ $t("title04") }}
        </div>
      </div>

      <div class="flex justify-start items-center gap-x-8">
        <img class="w-20 h-20" :src="getSvg('calendar')" alt="" />
        <span
          class="font-400 text-16 text-[#444444] lh-19 text-center not-italic"
          >{{ formattedDate }}</span
        >
      </div>

      <div class="flex justify-start items-center gap-x-8">
        <img class="w-20 h-20" :src="getSvg('Group_22')" alt="" />
        <span
          class="font-400 text-16 text-[#444444] lh-19 text-center not-italic"
        >
          <!-- 25-Shaban-ul-Moazzam-1446 -->
          {{ islamicDate }}
        </span>
      </div>
    </div>
  </div>
  <!-- <GoogleMap /> -->
  <FuzzySearch ref="fuzzySearchRef" />
</template>
